import { h } from 'vue';
import { NAvatar, NTag, NButton, NIcon } from 'naive-ui';
import { BasicColumn } from '@/components/Table';
import type { DataTableColumns } from 'naive-ui';
import type { UserItem } from './types';

export const columns: DataTableColumns<UserItem> = [
  {
    title: '用户ID',
    key: 'userID',
    width: 100,
  },
  {
    title: '用户名',
    key: 'username',
    width: 120,
  },
  {
    title: '邮箱',
    key: 'email',
    width: 200,
  },
  {
    title: '信用分',
    key: 'creditScore',
    width: 100,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
  },
  {
    title: '状态',
    key: 'status',
    width: 120,
    render(row) {
      const statusMap = {
        normal: { type: 'success', label: '正常' },
        temporaryBan: { type: 'warning', label: '临时封禁' },
        permanentBan: { type: 'error', label: '永久封禁' },
        admin: { type: 'info', label: '管理员' }
      };
      const status = statusMap[row.status] || { type: 'default', label: row.status };
      return h(NTag, { type: status.type }, { default: () => status.label });
    },
  },
  {
    title: '头像',
    key: 'headshot',
    width: 200,
    render(row) {
      return row.headshot ? h('img', { src: row.headshot, style: 'width: 40px; height: 40px; border-radius: 50%;' }) : '-';
    },
  },
];

// 示例处理函数
function handleEdit(user: UserItem) {
  console.log('Editing user:', user);
}

function handleDelete(user: UserItem) {
  console.log('Deleting user:', user);
}
